<!doctype html>
<html lang="en">
<head>
    <title>Programming Fonts - Test Drive</title>
    <meta name="description" content="Try out the best and newest monospace fonts for code">

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00">

    <!-- CSS reset -->
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css">

    <!-- CodeMirror -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css">
    <!-- CodeMirror Themes -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/3024-day.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/3024-night.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/abcdef.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/ambiance.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/base16-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/base16-light.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/bespin.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/blackboard.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/cobalt.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/colorforth.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/darcula.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/dracula.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/duotone-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/duotone-light.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/erlang-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/gruvbox-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/hopscotch.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/isotope.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/lesser-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/liquibyte.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/lucario.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/material.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/mbo.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/mdn-like.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/midnight.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/monokai.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/neo.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/night.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/nord.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/oceanic-next.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/paraiso-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/paraiso-light.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/pastel-on-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/railscasts.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/rubyblue.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/seti.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/shadowfox.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/solarized.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/the-matrix.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/tomorrow-night-bright.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/tomorrow-night-eighties.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/twilight.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/vibrant-ink.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/xq-dark.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/yeti.css">

    <!-- CodeMirror JS -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/edit/matchbrackets.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/selection/active-line.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/addon/mode/simple.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/clike/clike.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/commonlisp/commonlisp.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/css/css.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/go/go.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/haskell/haskell.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/javascript/javascript.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/pascal/pascal.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/perl/perl.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/php/php.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/python/python.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/r/r.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/ruby/ruby.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/rust/rust.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/shell/shell.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/swift/swift.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/xml/xml.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/clojure/clojure.min.js"></script>

    <!-- input mono -->
    <link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css">

    <!-- monolisa -->
    <link href="fonts/resources/monolisa/monolisa.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="main-wrapper">
        <main>
            <section id="filters">
                <div>
                    <button value="style" title="serifs or sans">
                        <svg width="12" height="12" alt="sans" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="matrix(1.64678,0,0,1.64678,-7.09053,3.87857)">
                                <g transform="matrix(12,0,0,12,4.97259,4.38784)">
                                    <path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/>
                                </g>
                            </g>
                        </svg>
                        <svg width="12" height="12" alt="serif" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
                                <g transform="matrix(12,0,0,12,4.29583,4.38784)">
                                    <path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/>
                                </g>
                            </g>
                        </svg>
                    </button>

                    <button value="zerostyle" title="zero style">
                        <svg width="12" height="12" alt="slashed" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/><rect transform="matrix(.82528 .56472 -.43794 .89901 0 0)" x="7.3105" y="-2.1319" width="1.1796" height="8.8701" stroke-width=".39701"/></g>
                            <ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
                        </svg>
                        <svg width="12" height="12" alt="dotted" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="scale(1.0887 .91856)" stroke-width=".39487" aria-label="0"><path d="m4.8368 5.7326h1.349v1.5988h-1.349zm4.6207 0.77235q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z"/></g>
                            <ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
                        </svg>
                        <svg width="12" height="12" alt="empty" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/></g>
                            <ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
                        </svg>
                    </button>

                    <button value="rendering" title="rendering">
                        <svg width="12" height="12" alt="vector" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
                                <g transform="matrix(12,0,0,12,4.2929,4.38784)">
                                    <path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/>
                                </g>
                            </g>
                        </svg>
                        <svg width="12" height="12" alt="bitmap" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <path d="M4,9L8,9L8,11L4,11L4,9ZM2,1L4,1L4,11L2,11L2,1ZM8,7L10,7L10,9L8,9L8,7ZM4,5L8,5L8,7L4,7L4,5ZM8,3L10,3L10,5L8,5L8,3ZM4,1L8,1L8,3L4,3L4,1Z"/>
                        </svg>
                    </button>

                    <button value="liga" title="ligatures">
                        <svg width="12" height="12" alt="yes" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g>
                                <path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
                            </g>
                        </svg>
                        <svg width="12" height="12" alt="no" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                            <g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
                                <g transform="matrix(12,0,0,12,3.03411,5.29647)">
                                    <rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
                                </g>
                                <g transform="matrix(12,0,0,12,10.4521,5.29647)">
                                    <path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
                                </g>
                            </g>
                        </svg>
                    </button>
                </div>
                <div>
                    <label for="authors-list" class="screenreader-only">Authors</label>
                    <select id="authors-list">
                        <optgroup>
                            <option value="all">All Authors</option>
                        </optgroup>
                        <optgroup class="other">
                            <!-- filled from json -->
                        </optgroup>
                    </select>
                </div>
                <div>
                    <label for="name-search" class="screenreader-only">Search</label>
                    <input type="text" id="name-search" placeholder="Search">
                </div>
            </section>
            <section class="select-list" tabindex="0">
                <div id="select-font">
                    <!-- filled from json -->
                </div>
            </section>
            <section class="config">
                <p>
                    <label for="size">Size</label>
                    <input type="number" id="size" value="16" min="1" max="32" step="1">
                </p>
                <p>
                    <label for="spacing">/</label>
                    <input type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
                </p>
                <p class="select">
                    <button class="nav-button" id="theme-previous">↑</button>
                    <button class="nav-button" id="theme-next">↓</button>
                    <label for="select-theme" class="screenreader-only">Theme</label>
                    <select id="select-theme">
                        <option>3024-day</option>
                        <option>3024-night</option>
                        <option>abcdef</option>
                        <option>ambiance</option>
                        <option>base16-dark</option>
                        <option>base16-light</option>
                        <option>bespin</option>
                        <option>blackboard</option>
                        <option>cobalt</option>
                        <option>colorforth</option>
                        <option>darcula</option>
                        <option selected>dracula</option>
                        <option>duotone-dark</option>
                        <option>duotone-light</option>
                        <option>erlang-dark</option>
                        <option>gruvbox-dark</option>
                        <option>hopscotch</option>
                        <option>isotope</option>
                        <option>lesser-dark</option>
                        <option>liquibyte</option>
                        <option>lucario</option>
                        <option>material</option>
                        <option>mbo</option>
                        <option>mdn-like</option>
                        <option>midnight</option>
                        <option>monokai</option>
                        <option>neo</option>
                        <option>night</option>
                        <option>nord</option>
                        <option>oceanic-next</option>
                        <option>paraiso-dark</option>
                        <option>paraiso-light</option>
                        <option>pastel-on-dark</option>
                        <option>railscasts</option>
                        <option>rubyblue</option>
                        <option>seti</option>
                        <option>shadowfox</option>
                        <option>solarized light</option>
                        <option>solarized dark</option>
                        <option>the-matrix</option>
                        <option>tomorrow-night-bright</option>
                        <option>tomorrow-night-eighties</option>
                        <option>twilight</option>
                        <option>vibrant-ink</option>
                        <option>xq-dark</option>
                        <option>yeti</option>
                    </select>
                </p>
                <p class="select">
                    <label for="select-language" class="screenreader-only">Language</label>
                    <select id="select-language">
                        <option>None</option>
                        <option>CSS</option>
                        <option>Go</option>
                        <option>JavaScript</option>
                        <option>PHP</option>
                        <option selected="selected">Python</option>
                        <option>Ruby</option>
                        <option>Shell</option>
                        <option>ASCII Art</option>

                        <optgroup label="Without sample">
                            <option value="clike">C (-like)</option>
                            <option>Haskell</option>
                            <option value="commonlisp">Common Lisp</option>
                            <option>Clojure</option>
                            <option>Pascal</option>
                            <option>Perl</option>
                            <option>R</option>
                            <option>Rust</option>
                            <option>Swift</option>
                            <option>XML</option>
                        </optgroup>
                    </select>
                </p>
            </section>

            <footer>
                <h1>
                    <a href="https://programmingfonts.tumblr.com">Programming Fonts</a>
                </h1>
                <p class="subtitle">Test drive all the programming fonts!</p>

                <span class="logo">
                    <a href="https://github.com/braver/programmingfonts" title="Github">
                        <svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16">
                            <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                        </svg>
                        <span class="screenreader-only">Github repo</span>
                    </a>

                    <a href="https://programmingfonts.tumblr.com" title="Tumblr">
                        <svg alt="tumblr logo" width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path>
                        </svg>
                        <span class="screenreader-only">Tumblr blog</span>
                    </a>
                </span>


                <a class="support" href="https://github.com/braver/programmingfonts/blob/gh-pages/README.md" aria-controls="about-dialog">
                    <span>About</span>
                </a>
            </footer>

        </main>
    </div>

    <div class="codemirror-wrapper">
        <form>
            <label for="code" class="screenreader-only">Code area</label>
            <textarea id="code" name="code"></textarea>
        </form>
        <aside class="info-wrapper">
            <h2><a href=""></a></h2>
            <p class="info"></p>
            <p class="variants"></p>
            <button class="text-button" id="compare-button">Compare</button>
        </aside>
    </div>

    <dialog id="about-dialog" autofocus>
        <h2>
            Programming Fonts
        </h2>
        <p>
            This website is a passion project.
            All fonts in one place, with proper credits towards the creators.
            It's not a download portal, there is no monetization or business plan,
            it's strictly by nerds and designers for nerds and designers.
        </p>
        <p>
            There are some small costs involved in maintaining and hosting this website.
            If you want to help out in some way,
            please send a donation via
            <a href="https://paypal.me/koenlageveen" rel="external">PayPal</a>.
        </p>
        <p>
            Please feel welcome to contibute to the project at
            <a href="https://github.com/braver/programmingfonts">GitHub</a>.
        </p>

        <p class="signature">
          <svg width="166px" height="78px" viewBox="36 33 498 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path d="M149.121094,33.8320312 C149.121094,33.8320312 20.2376234,156.514761 38.6054688,211.378906 C51.5394535,241.979025 143.144531,185.710938 143.144531,185.710938" id="Path" stroke="currentColor" stroke-width="1" fill="none"></path>
            <path d="M287.851563,56.5195312 C287.851563,56.5195312 233.523438,105.035156 208.847656,133.9375 C184.171875,162.839844 146.773438,209.050781 169.632813,233.125 C192.492188,257.199219 245.144531,216.253906 245.144531,216.253906" id="Path-2" stroke="currentColor" stroke-width="1" fill="none"></path>
            <path d="M269.683594,160.347656 C269.683594,160.347656 301.522074,154.107791 308.560637,194.274452 C312.732157,221.589914 286.142069,240.89427 270.185038,251.292708 C254.228006,261.691145 231.304688,265.550781 231.304688,265.550781" id="Path-3" stroke="currentColor" stroke-width="1" fill="none"></path>
            <path d="M92.932042,229.116604 C92.932042,229.116604 87.3326109,229.554235 124.677114,217.872856 C162.021616,206.191478 339.820312,169.085938 395.425781,159.929688 C451.03125,150.773438 532.585937,139.550781 532.585937,139.550781" id="Path-4" stroke="currentColor" stroke-width="1" fill="none"></path>
          </svg><br>
          Koen Lageveen
        </p>

        <button>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path></svg>
            <span class="screenreader-only">Close</span>
        </button>
    </dialog>

    <script src="index.js" type="module"></script>
</body>
</html>
